<template>
	<!-- <Codemirror ref="myCm" :value="codeValue" :options="cmOptions" @input="onCmCodeChange" /> -->
	<v-ace-editor
		v-model:value="codeValue"
		lang="json"
		theme="monokai"
		:options="Options"
		id="editor" />
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive, watch } from 'vue';
import './aceConfigs';
import { VAceEditor } from 'vue3-ace-editor';

const props = defineProps({
	code: {
		type: String,
		default: ''
	}
});
const codeValue = ref(props.code);
const Options = reactive({
	// codemirror options
	useWorker: true, // 启用语法检查,必须为true
	enableBasicAutocompletion: true, // 自动补全
	enableLiveAutocompletion: true, // 智能补全
	enableSnippets: true, // 启用代码段
	showPrintMargin: false, // 去掉灰色的线，printMarginColumn
	highlightActiveLine: true, // 高亮行
	highlightSelectedWord: true, // 高亮选中的字符
	tabSize: 4, // tab锁进字符
	fontSize: 14, // 设置字号
	wrap: false // 是否换行
});
const emit = defineEmits(['update:code', 'change']);
function emitCode() {
	emit('update:code', codeValue.value);
}
// const codemirror = computed(() => {
// 	return myCm.value.codemirror;
// });
watch(
	() => props.code,
	(nv) => {
		codeValue.value = nv;
	}
);

// function onCmCodeChange(newCode: any, oldCode: any) {
// 	// console.log('this is new codeValue', newCode)
// 	if (newCode === oldCode) {
// 		return;
// 	}
// 	// codeValue.value = newCode;
// 	emit('update:code', newCode);
// }

onMounted(() => {});
defineExpose({ emitCode });
</script>

<style lang="scss" scoped>
#editor {
	/* ace-editor默认没有高度，所以必须设置高度，或者同时设置最小行和最大行使编辑器的高度自动增高 */
	height: 400px;
	// border: 1px solid;
	.ace_scrollbar-v {
		height: 0 !important;
	}
}
</style>
